<style lang='less' >
 	@import '~style/table.less';

  
</style>

<template>
  <div>
      <div class="dataBox" >
          <el-table
            :data="formData"
            height="450"
            style="width: 100%"
            :default-sort = "{prop: 'id', order: 'descending'}">
            <el-table-column
                prop='id'
                sortable
                label="序号"
                width='100'>
            </el-table-column>

            <el-table-column
                prop="productNo"
                label="产品编码"
                width='160'>
            </el-table-column>

            <el-table-column
                prop="productName"
                label="产品名称"
                width='160'>
            </el-table-column>

            <el-table-column
                prop="issuerName"
                label="发行方"
                width='140'>
            </el-table-column>

            <el-table-column
                prop="publishStatus"
                label="上下架状态"
                :formatter='getPublishStatus'
                width="140">
            </el-table-column>
                
            <el-table-column
                prop="publishBeginDate"
                label="上架时间"
                sortable
                width='170'>
            </el-table-column>

            <el-table-column
                prop="publishEndDate"
                label="下架时间"
                sortable
                width='170'>
            </el-table-column>
         
          <el-table-column label="操作" min-width="300" >
              <template scope="scope">
                  <btns-box
                      :scope='scope'
                      :btnControl='getButtonConfig'
                      v-on:reloadPage='reloadPage'
                  ></btns-box>
              </template>

          </el-table-column>
          </el-table>
      </div>

      <div class="paginationBox">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-sizes="[10, 20, 30, 50]"
              layout="total, sizes, prev, pager, next, jumper"
              :current-page.sync="currentPage"
              :page-size="pageSize"
              :total='totalSize'>
          </el-pagination>
      </div>
  </div>
</template>

<script>
    import btnsBox from './_button.vue'
    import{publishStatusObj} from '../config.js'
    export default {
      props:['getButtonConfig', 'issuerList', 'formData','totalSize'],
        components:{
            btnsBox,
        },
        data(){
            return{
                publishStatusObj:publishStatusObj,
                currentPage:1,//当前页
                pageSize:10,//每页显示的条数
            }
        },
        methods:{
            handleSizeChange(val) {
                // console.log(`每页 ${val} 条`);
                this.pageSize = val;
                this.currentPage = 1;
                this.setTableParams()
            },
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.setTableParams()
            
            },
            setTableParams(){
                let obj = {
                    curPage:this.currentPage-1,
                    pageSize:this.pageSize,
                }
                this.$emit('setTableParams', obj)

            },
            getPublishStatus(row, column){
                return this.publishStatusObj[row.publishStatus]
            },
            reloadPage(){
                this.$emit('reloadPage')
            },
        },
        created(){
            this.setTableParams()
        },
        mounted(){

        },
  }
</script>